<template>
  <div class="bg-color-default">
    <IndexHeader ref="headerRef"></IndexHeader>
    <div class="container">
      <el-breadcrumb separator=">" style="margin-top: 20px;">
        <el-breadcrumb-item
            v-for="(item, index) in data.breadList"
            :key="index"
            :to="{ path: item.path }">
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="base-info flex">
        <div class="media-domain">
          <img :src="data.detail.picUrl" class="media-img"/>
        </div>

        <div class="course-domain">
          <p class="title">{{ data.detail.name }}</p>
          <p class="subtitle">有效期至{{ data.detail.validEndTime }}</p>
          <div class="card-sale">
            <div class="price-block">
              <label class="label">价 格</label>
              <span class="price-new">{{ data.detail.realPrice }}</span>
              <span class="hot">报名中</span>
            </div>
          </div>

          <div class="classify-block active flex">
            <label class="label">选择科目</label>
            <div class="classify-group">
              <ul>
                <li :class="data.selectedSkuIndex == index ? 'current' : ''"
                    v-for="(item, index) in data.detail.skuList" @click="changeSku(item,index)">
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>

          <div class="pay-block">
            <div class="button button-buy" @click="openDialog('lijigoumai')">
              <span>立即购买</span>
            </div>
            <div class="button button-kefu" @click="openDialog('kechengzixun')">课程咨询</div>
          </div>
        </div>
      </div>

      <div class="section-block">
        <div class="section-detail">
          <div class="tab-group">
            <div class="tab">
              <span class="item" :class="data.selectedIndex == 0 ? 'current' : ''" @click="changeTab(0)">
                课程介绍
              </span>
              <span class="item" :class="data.selectedIndex == 1 ? 'current' : ''" @click="changeTab(1)">
                课程表
              </span>
              <span class="item" :class="data.selectedIndex == 2 ? 'current' : ''" @click="changeTab(2)">
                主讲老师
              </span>
            </div>
          </div>
          <div class="tagblock-content" v-if="data.selectedIndex == 0">
            <div v-html="data.detail.descr">
            </div>
          </div>
          <div class="tagblock-course" v-if="data.selectedIndex == 1">
            <div class="course">
              <div class="tab" style="margin-bottom: 20px;">
                <span :class="data.selectedTabSkuIndex == index ? 'current' : ''"
                      v-for="(item,index) in data.tabSkuList" @click="changeTabSku(index)">
                    {{ item.name }}
                </span>
              </div>

              <CourseCurriculum :type="1" :courseRightBtn="false" :dataArr="data.courseStructureArray" :isCourseTable="true"
                                style="margin-top: 20px"></CourseCurriculum>
            </div>
          </div>
          <div class="tagblock-teacher" v-if="data.selectedIndex == 2">
            <ul class="teacher-list">
              <li class="teacher-item" v-for="(item, index) in data.detail.teacherList">
                <a>
                  <img alt="" class="face"
                       lazy="loading"
                       :src="item.avatarPicUrl">
                  <p class="teacher-name">{{ item.name }}</p>
                </a>
                <p class="teacher-description">
                  {{ item.introduce }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="section-more">
          <div class="question-domain">
            <div class="domain-title">
              常见问题
            </div>
            <ul class="q-list">
              <li class="item" v-for="(item, index) in data.questionArray"
                  :class="data.questionOnObj['t' + index] ? 'on' : ''" @click="changeQuestionOn(index)">
                <p class="title">
                  <span class="icon"></span>{{ item.title }}
                </p>
                <p class="body" v-html="item.content"></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--    底部栏-->
    <Footer/>
  </div>
  <contact-customer-dialog  ref="costomerDialog"></contact-customer-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import IndexHeader from "../component/header.vue";
import Footer from '../component/footer.vue'
import {getGoodsById} from "../../api/goods";
import CourseCurriculum from "../component/course-curriculum.vue";
import {getCourseDetailById} from "../../api/course";
import {listArticleByIntentExam} from "../../api/home";
import ContactCustomerDialog from "@/views/component/contact-customer-dialog.vue";

const headerRef = ref(null)
const route = useRoute();
const router = useRouter();
// const centerHeight = ref('100vh');
const data = reactive({
  breadList: [
    {code: 'home', name: '首页', path: '/'},
    {code: 'courseType', name: '一级建造师', path: '/course/center?courseType=1'},
    {code: 'courseGood', name: '一级建造师'}
  ],
  selectedIndex: 0,
  selectedSkuIndex: 0,
  selectedTabSkuIndex: 0,
  tabSkuList: [],
  courseStructureArray: [],
  detail: {
    id: '',
    name: '',
    realPrice: '',
    picUrl: '',
    descr: '',
    skuList: [],
    teacherList: [],
    validStartTime: '',
    validEndTime: '',
  },
  questionOnObj: {'t0': true},
  questionArray: [],
  contactDialog: false,
})
let costomerDialog=ref()
const initData = () => {
  let id = route.query.id
  getGoodsById(id, (res) => {
    data.breadList[1] = {
      code: 'courseType', name: res.data.categoryName, path: `/course/center?courseType=${res.data.categoryId}`
    }
    data.breadList[2] = {code: 'courseType', name: res.data.name}
    Object.keys(data.detail).forEach((key) => {
      data.detail[`${key}`] = res.data[`${key}`]
    })
    let skuList = data.detail.skuList

    changeSku(skuList[data.selectedSkuIndex], data.selectedSkuIndex)
    let skuArray = []
    skuList.forEach((item) => {
      if (item.courseIdList && item.courseIdList.length == 1) {
        skuArray.push(item)
      }
    })
    data.tabSkuList = skuArray
    changeTabSku(data.selectedTabSkuIndex)
  })

  let paramObj = {catalogCode: 'CHANGJIANWENTI', intentionalExamFlag: 0}
  listArticleByIntentExam(paramObj, (res) => {
    data.questionArray = res.data
  })
}

const changeTab = (index) => {
  data.selectedIndex = index
}

const changeSku = (item, index) => {
  data.selectedSkuIndex = index
  data.detail.realPrice = item.realPrice
}

const changeTabSku = (index) => {
  data.selectedTabSkuIndex = index
  let tabSkuItem = data.tabSkuList[index]
  let courseId = tabSkuItem.courseIdList[0]
  getCourseDetailById(courseId, (res) => {
    let resData = res.data
    data.courseStructureArray = resData.structureJson
  })
}

const changeQuestionOn = (index) => {
  let value = data.questionOnObj['t' + index]
  let rs = value ? false : true
  data.questionOnObj['t' + index] = rs
}
const openDialog = (text) => {
  costomerDialog.value.openDialog(text)
}
onMounted(() => {
  initData()
})
</script>

<style lang='scss'>
.el-breadcrumb__item .el-breadcrumb__inner.is-link {
  color: #9598a2;
  font-weight: 400 !important;
}
.tagblock-content{
  img{
    margin: 0 auto;
  }
}
</style>
<style src="../../assets/styles/goods.css" scoped></style>

